<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8" />
		<title>闭包演示</title>
        <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				font-family: "microsoft yahei";
			}
			
			ul li {
				list-style-type: none;
			}
			
			.box {
				width: 200px;
				/*border: 1px solid red;*/
			}
			
			ul {
				margin-left: 20px;
				/*border: 1px solid blue;*/
			}
			
			.menuUl li {
				margin: 10px 0;
			}
			
			.menuUl li span:hover {
				text-decoration: underline;
				cursor: pointer;
			}
			
			.menuUl li i { margin-right: 10px; top: 0px; cursor: pointer; color: #161616; 			}
		</style>
	</head>

	<body>
		<div class="innerUl">

		</div>
	</body>
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="proTree.js" ></script>
	<script type="text/javascript">
		//后台传入的 标题列表
		var arr = [{
				id: 1,
				name: "一级标题",
				pid: 0
			}, {
				id: 2,
				name: "二级标题",
				pid: 0
			}, {
				id: 3,
				name: "2.1级标题",
				pid: 2
			}, {
				id: 4,
				name: "2.2级标题",
				pid: 2
			}, {
				id: 5,
				name: "1.1级标题",
				pid: 1
			}, {
				id: 6,
				name: "1.2级标题",
				pid: 1
			}, {
				id: 7,
				name: "1.21级标题",
				pid: 6
			}, {
				id: 8,
				name: "三级标题",
				pid: 0
			}, {
				id: 9,
				name: "1.22级标题",
				pid: 6
			}, {
				id: 10,
				name: "1.221级标题",
				pid: 9
			}, {
				id: 11,
				name: "1.2211级标题",
				pid: 10
			}, {
				id: 12,
				name: "1.2212级标题",
				pid: 10
			}

		];
        //标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
		$(".innerUl").ProTree({
			arr: arr,
			close:true,
			simIcon: "fa fa-file-o",//单个标题字体图标 不传默认glyphicon-file
			mouIconOpen: "fa fa-folder-open-o",//含多个标题的打开字体图标  不传默认glyphicon-folder-open
			mouIconClose:"fa fa-folder-o",//含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
			callback: function(id,name) {
				alert("你选择的id是" + id + "，名字是" + name);
			}

		})
	</script>

</html>